86:I[903690,["/chat-static/_next/static/immutable/chunks/0t5koc6gywtjg.js","/chat-static/_next/static/immutable/chunks/2d5ra3e0435kr.js","/chat-static/_next/static/immutable/chunks/2v089ui-jko4d.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/3fk4u2d6m9dj-.js","/chat-static/_next/static/immutable/chunks/42f8gzjthz4xm.js","/chat-static/_next/static/immutable/chunks/1enj0--qh8_5a.js","/chat-static/_next/static/immutable/chunks/0ko_j9ax7y6x0.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/33yo_g45dr57n.js","/chat-static/_next/static/immutable/chunks/0sf49n39-457l.js","/chat-static/_next/static/immutable/chunks/2y4tmciu_pml1.js","/chat-static/_next/static/immutable/chunks/3e68w17lftq23.js","/chat-static/_next/static/immutable/chunks/38fcx4vaj9p6g.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/1nag2_qii5d3b.js","/chat-static/_next/static/immutable/chunks/2297wuuoux0mr.js","/chat-static/_next/static/immutable/chunks/2ic8lww1-lsd6.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/2d_66tvt_-qxg.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/2i3ljaggpd7p4.js","/chat-static/_next/static/immutable/chunks/3u537i82dxvjy.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/0jywfwuiu_hpq.js","/chat-static/_next/static/immutable/chunks/0xg0t_a536i1t.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/0z_kwscs0-xkv.js","/chat-static/_next/static/immutable/chunks/1bfn_hru-4enh.js","/chat-static/_next/static/immutable/chunks/1zwrrh1n1isp0.js","/chat-static/_next/static/immutable/chunks/365o88upxg8nb.js","/chat-static/_next/static/immutable/chunks/2-h-ggegl4qz4.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/2niei3xz3mph4.js","/chat-static/_next/static/immutable/chunks/3j1smr879e_f6.js","/chat-static/_next/static/immutable/chunks/1j4n_6xagcur9.js","/chat-static/_next/static/immutable/chunks/2g2_401nxyrm5.js","/chat-static/_next/static/immutable/chunks/11o1o6qzk3ejc.js","/chat-static/_next/static/immutable/chunks/2nu9j7-o_9ilo.js","/chat-static/_next/static/immutable/chunks/3b6uum5y_1nfz.js"],"ExplicitChatIdProvider"] 87:I[838238,["/chat-static/_next/static/immutable/chunks/0t5koc6gywtjg.js","/chat-static/_next/static/immutable/chunks/2d5ra3e0435kr.js","/chat-static/_next/static/immutable/chunks/2v089ui-jko4d.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/3fk4u2d6m9dj-.js","/chat-static/_next/static/immutable/chunks/42f8gzjthz4xm.js","/chat-static/_next/static/immutable/chunks/1enj0--qh8_5a.js","/chat-static/_next/static/immutable/chunks/0ko_j9ax7y6x0.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/33yo_g45dr57n.js","/chat-static/_next/static/immutable/chunks/0sf49n39-457l.js","/chat-static/_next/static/immutable/chunks/2y4tmciu_pml1.js","/chat-static/_next/static/immutable/chunks/3e68w17lftq23.js","/chat-static/_next/static/immutable/chunks/38fcx4vaj9p6g.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/1nag2_qii5d3b.js","/chat-static/_next/static/immutable/chunks/2297wuuoux0mr.js","/chat-static/_next/static/immutable/chunks/2ic8lww1-lsd6.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/2d_66tvt_-qxg.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/2i3ljaggpd7p4.js","/chat-static/_next/static/immutable/chunks/3u537i82dxvjy.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/0jywfwuiu_hpq.js","/chat-static/_next/static/immutable/chunks/0xg0t_a536i1t.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/0z_kwscs0-xkv.js","/chat-static/_next/static/immutable/chunks/1bfn_hru-4enh.js","/chat-static/_next/static/immutable/chunks/1zwrrh1n1isp0.js","/chat-static/_next/static/immutable/chunks/365o88upxg8nb.js","/chat-static/_next/static/immutable/chunks/2-h-ggegl4qz4.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/2niei3xz3mph4.js","/chat-static/_next/static/immutable/chunks/3j1smr879e_f6.js","/chat-static/_next/static/immutable/chunks/1j4n_6xagcur9.js","/chat-static/_next/static/immutable/chunks/2g2_401nxyrm5.js","/chat-static/_next/static/immutable/chunks/11o1o6qzk3ejc.js","/chat-static/_next/static/immutable/chunks/2nu9j7-o_9ilo.js","/chat-static/_next/static/immutable/chunks/3b6uum5y_1nfz.js"],"SWRDataProvider"] 88:T1e9cb,[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import V0Blocks from "@/components/v0-blocks" export default function Home() { return } [V0_FILE]typescript:file="lib/constants.ts" isMerged="true" export const GRID_SIZE = 20 export const BRICK_HEIGHT = 1.2 export const LAYER_GAP = 0.005 export const GROUND_HEIGHT = BRICK_HEIGHT / 4 export const STUD_HEIGHT = 0.2 export const STUD_RADIUS = 0.3 export const STUD_SEGMENTS = 16 export const TEXTURES = { roughness: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Plastic013A_1K-JPG_Roughness-uXe3bt2x4CgFTpjN9nyi0fPRvu69f2.jpg", normal: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Plastic013A_1K-JPG_NormalGL-K5hpwiN8hyBFaqLgpGOBe1n7JypC5n.jpg", color: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Plastic013A_1K-JPG_Color-vAhGH2sCmmtYLZ4Qp4UAdIIqzuTWkB.jpg", } export const MARBLE_TEXTURES = { roughness: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Marble019_1K-JPG_Roughness-E11kZGSuFRz7Tw1kAaDKzpCm9PexxD.jpg", normal: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Marble019_1K-JPG_NormalGL-yyE1gw0semnetBvj2CIz5UfqwTwoHr.jpg", color: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Marble019_1K-JPG_Color-yiNesdpa46Mn7IwRiCFo11NERCO2Yw.jpg", } [V0_FILE]typescriptreact:file="components/large-plane.tsx" isMerged="true" import type React from "react" import * as THREE from "three" import { useTexture } from "@react-three/drei" import { MARBLE_TEXTURES } from "@/lib/constants" export const LargePlane: React.FC = () => { const marbleTextures = useTexture(MARBLE_TEXTURES, (loadedTextures) => { Object.values(loadedTextures).forEach((texture) => { texture.wrapS = texture.wrapT = THREE.RepeatWrapping texture.repeat.set(1000, 1000) }) }) return ( ) } [V0_FILE]typescriptreact:file="components/highlight-square.tsx" isMerged="true" import type React from "react" import * as THREE from "three" interface HighlightSquareProps { position: [number, number, number] isValid: boolean width: number height: number } export const HighlightSquare: React.FC = ({ position, isValid, width, height }) => { return ( ) } [V0_FILE]typescriptreact:file="components/platform.tsx" isMerged="true" "use client" import type React from "react" import { useMemo } from "react" import * as THREE from "three" import { Instances, Instance } from "@react-three/drei" import { GRID_SIZE, GROUND_HEIGHT, STUD_HEIGHT, STUD_RADIUS } from "@/lib/constants" export const Platform: React.FC = () => { const studGeometry = useMemo(() => new THREE.CylinderGeometry(STUD_RADIUS, STUD_RADIUS, STUD_HEIGHT, 12), []) const studPositions = useMemo(() => { const positions = [] for (let x = -GRID_SIZE / 2 + 0.5; x < GRID_SIZE / 2; x++) { for (let z = -GRID_SIZE / 2 + 0.5; z < GRID_SIZE / 2; z++) { positions.push([x, GROUND_HEIGHT / 2 + STUD_HEIGHT / 2, z]) } } return positions }, []) return ( {studPositions.map((pos, index) => ( ))} ) } [V0_FILE]typescriptreact:file="app/fonts.ts" isMerged="true" import { Geist } from "next/font/google" export const geistSans = Geist({ subsets: ["latin"], display: "swap", variable: "--font-geist-sans", }) [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { geistSans } from "./fonts" import "./globals.css" export const metadata: Metadata = { title: "V0 Blocks", description: "A 3D block building application", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; :root { --font-geist: var(--font-geist-sans); } html, body { height: 100%; width: 100%; margin: 0; padding: 0; overflow: hidden; position: fixed; touch-action: none; overscroll-behavior: none; user-select: none; /* Prevent text selection */ -webkit-user-select: none; /* Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE/Edge */ } body { font-family: var(--font-geist); touch-action: manipulation; /* Improve touch behavior */ } @layer utilities { .text-balance { text-wrap: balance; } } @layer base { :root { --background: 0 0% 100%; --foreground: 0 0% 3.9%; --card: 0 0% 100%; --card-foreground: 0 0% 3.9%; --popover: 0 0% 100%; --popover-foreground: 0 0% 3.9%; --primary: 0 0% 9%; --primary-foreground: 0 0% 98%; --secondary: 0 0% 96.1%; --secondary-foreground: 0 0% 9%; --muted: 0 0% 96.1%; --muted-foreground: 0 0% 45.1%; --accent: 0 0% 96.1%; --accent-foreground: 0 0% 9%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 0 0% 89.8%; --input: 0 0% 89.8%; --ring: 0 0% 3.9%; --chart-1: 12 76% 61%; --chart-2: 173 58% 39%; --chart-3: 197 37% 24%; --chart-4: 43 74% 66%; --chart-5: 27 87% 67%; --radius: 0.5rem; --sidebar-background: 0 0% 98%; --sidebar-foreground: 240 5.3% 26.1%; --sidebar-primary: 240 5.9% 10%; --sidebar-primary-foreground: 0 0% 98%; --sidebar-accent: 240 4.8% 95.9%; --sidebar-accent-foreground: 240 5.9% 10%; --sidebar-border: 220 13% 91%; --sidebar-ring: 217.2 91.2% 59.8%; } .dark { --background: 0 0% 3.9%; --foreground: 0 0% 98%; --card: 0 0% 3.9%; --card-foreground: 0 0% 98%; --popover: 0 0% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 0 0% 9%; --secondary: 0 0% 14.9%; --secondary-foreground: 0 0% 98%; --muted: 0 0% 14.9%; --muted-foreground: 0 0% 63.9%; --accent: 0 0% 14.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 0 0% 14.9%; --input: 0 0% 14.9%; --ring: 0 0% 83.1%; --chart-1: 220 70% 50%; --chart-2: 160 60% 45%; --chart-3: 30 80% 55%; --chart-4: 280 65% 60%; --chart-5: 340 75% 55%; --sidebar-background: 240 5.9% 10%; --sidebar-foreground: 240 4.8% 95.9%; --sidebar-primary: 224.3 76.3% 48%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 240 3.7% 15.9%; --sidebar-accent-foreground: 240 4.8% 95.9%; --sidebar-border: 240 3.7% 15.9%; --sidebar-ring: 217.2 91.2% 59.8%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]javascript:file="tailwind.config.js" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", "*.{js,ts,jsx,tsx,mdx}", "app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}", ], theme: { extend: { fontFamily: { sans: ["var(--font-geist-sans)"], }, colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, purple: { 950: "#1a103d", 900: "#2a1a5e", 800: "#3a2a7e", 700: "#4a3a9e", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, animation: { in: "in 0.2s ease-out", }, keyframes: { in: { "0%": { opacity: 0 }, "100%": { opacity: 1 }, }, }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescript:file="components/v0-blocks/events.ts" isMerged="true" import type { Dispatch, SetStateAction } from "react" // Define types for our brick and history export type Brick = { color: string position: [number, number, number] width: number height: number } export type BrickHistory = Brick[][] // Event handlers export const handleAddBrick = ( brick: Brick, bricks: Brick[], setBricks: Dispatch>, history: BrickHistory, historyIndex: number, setHistory: Dispatch>, setHistoryIndex: Dispatch>, ) => { const newBricks = [...bricks, brick] setBricks(newBricks) const newHistory = history.slice(0, historyIndex + 1) newHistory.push(newBricks) setHistory(newHistory) setHistoryIndex(historyIndex + 1) } export const handleDeleteBrick = ( index: number, bricks: Brick[], setBricks: Dispatch>, history: BrickHistory, historyIndex: number, setHistory: Dispatch>, setHistoryIndex: Dispatch>, ) => { const newBricks = bricks.filter((_, i) => i !== index) setBricks(newBricks) const newHistory = history.slice(0, historyIndex + 1) newHistory.push(newBricks) setHistory(newHistory) setHistoryIndex(historyIndex + 1) } export const handleUpdateBrick = ( index: number, newPosition: [number, number, number], bricks: Brick[], setBricks: Dispatch>, history: BrickHistory, historyIndex: number, setHistory: Dispatch>, setHistoryIndex: Dispatch>, ) => { const newBricks = bricks.map((brick, i) => (i === index ? { ...brick, position: newPosition } : brick)) setBricks(newBricks) const newHistory = history.slice(0, historyIndex + 1) newHistory.push(newBricks) setHistory(newHistory) setHistoryIndex(historyIndex + 1) } export const handleUndo = ( historyIndex: number, setHistoryIndex: Dispatch>, history: BrickHistory, setBricks: Dispatch>, ) => { if (historyIndex > 0) { const newIndex = historyIndex - 1 setHistoryIndex(newIndex) setBricks(history[newIndex]) } } export const handleRedo = ( historyIndex: number, setHistoryIndex: Dispatch>, history: BrickHistory, setBricks: Dispatch>, ) => { if (historyIndex < history.length - 1) { const newIndex = historyIndex + 1 setHistoryIndex(newIndex) setBricks(history[newIndex]) } } export const handleClearSet = ( setBricks: Dispatch>, setHistory: Dispatch>, setHistoryIndex: Dispatch>, ) => { setBricks([]) setHistory([[]]) setHistoryIndex(0) } export const handlePlayToggle = (isPlaying: boolean, setIsPlaying: Dispatch>) => { setIsPlaying(!isPlaying) } [V0_FILE]typescript:file="components/block/types.ts" isMerged="true" export interface BlockProps { color: string position: [number, number, number] width: number height: number isPlacing?: boolean opacity?: number onClick?: () => void } [V0_FILE]typescriptreact:file="components/block/index.tsx" isMerged="true" "use client" import type React from "react" import { useRef, useMemo } from "react" import * as THREE from "three" import { useFrame } from "@react-three/fiber" import { Instances, Instance, useTexture } from "@react-three/drei" import { BRICK_HEIGHT, LAYER_GAP, STUD_HEIGHT, STUD_RADIUS, STUD_SEGMENTS, TEXTURES } from "@/lib/constants" import type { BlockProps } from "./types" export const Block: React.FC = ({ color, position, width, height, isPlacing = false, opacity = 1, onClick, }) => { const depth = height const blockGeometry = useMemo(() => new THREE.BoxGeometry(width, BRICK_HEIGHT - LAYER_GAP, depth), [width, depth]) const studGeometry = useMemo( () => new THREE.CylinderGeometry(STUD_RADIUS, STUD_RADIUS, STUD_HEIGHT, STUD_SEGMENTS), [], ) const studPositions = useMemo(() => { const positions = [] for (let x = -width / 2 + 0.5; x < width / 2; x++) { for (let z = -depth / 2 + 0.5; z < depth / 2; z++) { positions.push([x, BRICK_HEIGHT / 2 - LAYER_GAP / 2 + STUD_HEIGHT / 2, z]) } } return positions }, [width, depth]) const textures = useTexture(TEXTURES) const brickRef = useRef(null) const studRef = useRef(null) const groupRef = useRef(null) // Determine if this is an erase highlight const isEraseHighlight = isPlacing && onClick !== undefined useFrame((state) => { if (isPlacing && brickRef.current && studRef.current) { // Use different colors for build mode (yellow) vs erase mode (red) const glowColor = isEraseHighlight ? new THREE.Color(1, 0, 0) : new THREE.Color(1, 1, 0) const glowIntensity = Math.sin(state.clock.elapsedTime * 4) * 0.1 + 0.9 brickRef.current.material.emissive.copy(glowColor) brickRef.current.material.emissiveIntensity = glowIntensity studRef.current.material.emissive.copy(glowColor) studRef.current.material.emissiveIntensity = glowIntensity } }) const instanceLimit = useMemo(() => Math.max(width * depth, 100), [width, depth]) // Convert color to darker version for better shadow definition const darkenedColor = useMemo(() => { if (isEraseHighlight) return "#ff0000" // Red for erase mode if (isPlacing) return "#ffff00" // Yellow for build mode // Convert hex to RGB const hex = color.replace("#", "") const r = Number.parseInt(hex.substring(0, 2), 16) const g = Number.parseInt(hex.substring(2, 4), 16) const b = Number.parseInt(hex.substring(4, 6), 16) // Darken by 10% const darkenFactor = 0.9 const newR = Math.floor(r * darkenFactor) const newG = Math.floor(g * darkenFactor) const newB = Math.floor(b * darkenFactor) return `#${newR.toString(16).padStart(2, "0")}${newG.toString(16).padStart(2, "0")}${newB.toString(16).padStart(2, "0")}` }, [color, isPlacing, isEraseHighlight]) // Handle click with stopPropagation to ensure the correct block is deleted const handleClick = (e: THREE.ThreeEvent) => { e.stopPropagation() if (onClick) onClick() } // Check if we're on mobile const isMobile = useMemo(() => { if (typeof window !== "undefined") { return window.innerWidth < 768 } return false }, []) // Only use onPointerDown for erase mode on mobile // For build mode, we need to use the regular click handler const isEraseMode = isEraseHighlight && isMobile return ( { // For mobile erase mode only, trigger click on pointer down if (isEraseMode && onClick) { e.stopPropagation() onClick() } }} > {studPositions.map((pos, index) => ( ))} ) } [V0_FILE]typescriptreact:file="components/scene/types.ts" isMerged="true" import type { Brick } from "@/components/v0-blocks/events" export interface SceneProps { bricks: Brick[] selectedColor: string width: number depth: number onAddBrick: (brick: Brick) => void onDeleteBrick?: (index: number) => void onUndo: () => void onRedo: () => void isPlaying: boolean interactionMode?: "build" | "move" | "erase" } [V0_FILE]typescriptreact:file="components/popover.tsx" isMerged="true" "use client" import type React from "react" import { useState, useRef, useEffect } from "react" interface PopoverProps { isOpen: boolean onClose: () => void anchor: React.RefObject children: React.ReactNode position?: "top" | "bottom" } export const Popover: React.FC = ({ isOpen, onClose, anchor, children, position = "bottom" }) => { const [popoverPosition, setPopoverPosition] = useState({ top: 0, left: 0 }) const popoverRef = useRef(null) // Calculate and set position whenever the popover opens or the anchor changes useEffect(() => { const updatePosition = () => { if (isOpen && anchor.current && popoverRef.current) { const rect = anchor.current.getBoundingClientRect() const popoverRect = popoverRef.current.getBoundingClientRect() let top: number if (position === "top") { // Position above the anchor element top = rect.top - popoverRect.height - 8 } else { // Position below the anchor element top = rect.bottom + 8 } // Center horizontally relative to the anchor let left = rect.left + rect.width / 2 - popoverRect.width / 2 // Adjust position if it goes off-screen if (left < 10) { left = 10 } else if (left + popoverRect.width > window.innerWidth - 10) { left = window.innerWidth - popoverRect.width - 10 } setPopoverPosition({ top, left }) } } // Initial position calculation if (isOpen) { // Use requestAnimationFrame to ensure the popover is rendered before measuring requestAnimationFrame(() => { updatePosition() }) } // Update position on resize window.addEventListener("resize", updatePosition) return () => { window.removeEventListener("resize", updatePosition) } }, [isOpen, anchor, position]) // Handle clicks outside the popover useEffect(() => { const handleClickOutside = (event: MouseEvent) => { if ( popoverRef.current && !popoverRef.current.contains(event.target as Node) && anchor.current && !anchor.current.contains(event.target as Node) ) { onClose() } } if (isOpen) { // Delay adding the event listener to prevent immediate closing const timer = setTimeout(() => { document.addEventListener("mousedown", handleClickOutside) }, 100) return () => { clearTimeout(timer) document.removeEventListener("mousedown", handleClickOutside) } } }, [isOpen, onClose, anchor]) if (!isOpen) return null return (

{children}

) } [V0_FILE]typescriptreact:file="components/audio-player.tsx" isMerged="true" "use client" import type React from "react" import { useState, useRef, useEffect } from "react" import { Volume2, VolumeX } from "lucide-react" export const AudioPlayer: React.FC = () => { const [isMuted, setIsMuted] = useState(true) const audioRef = useRef(null) useEffect(() => { audioRef.current = new Audio( "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Pixel%20Dreams-wNU5nif9OTg2n5YIcFd3j8bteFV2As.mp3", ) audioRef.current.loop = true }, []) useEffect(() => { if (audioRef.current) { if (isMuted) { audioRef.current.pause() } else { audioRef.current.play() } } }, [isMuted]) return ( ) } [V0_FILE]typescriptreact:file="components/mobile-toolbar.tsx" isMerged="true" "use client" import type React from "react" import { Pencil, Camera } from "lucide-react" interface MobileToolbarProps { onModeChange: (mode: "draw" | "camera") => void currentMode: "draw" | "camera" } export const MobileToolbar: React.FC = ({ onModeChange, currentMode }) => { return (

) } [V0_FILE]typescriptreact:file="components/tooltip.tsx" isMerged="true" "use client" import type React from "react" import { useState, useRef, useEffect } from "react" import { createPortal } from "react-dom" interface TooltipProps { text: string position?: "top" | "right" | "bottom" | "left" children: React.ReactNode delay?: number } export const Tooltip: React.FC = ({ text, position = "top", children, delay = 400 }) => { const [isVisible, setIsVisible] = useState(false) const [mounted, setMounted] = useState(false) const childRef = useRef(null) const timerRef = useRef(null) const [tooltipPosition, setTooltipPosition] = useState({ top: 0, left: 0 }) // Handle client-side mounting useEffect(() => { setMounted(true) return () => setMounted(false) }, []) const showTooltip = () => { if (timerRef.current) clearTimeout(timerRef.current) timerRef.current = setTimeout(() => { if (!childRef.current) return const rect = childRef.current.getBoundingClientRect() let top = 0 let left = 0 switch (position) { case "top": top = rect.top - 30 // Position above with enough space for the tooltip left = rect.left + rect.width / 2 break case "right": top = rect.top + rect.height / 2 left = rect.right + 8 break case "bottom": top = rect.bottom + 8 left = rect.left + rect.width / 2 break case "left": top = rect.top + rect.height / 2 left = rect.left - 8 break } setTooltipPosition({ top, left }) setIsVisible(true) }, delay) } const hideTooltip = () => { if (timerRef.current) { clearTimeout(timerRef.current) timerRef.current = null } setIsVisible(false) } useEffect(() => { return () => { if (timerRef.current) { clearTimeout(timerRef.current) } } }, []) // Determine tooltip class based on position const getTooltipClass = () => { const baseClass = "fixed z-50 px-2 py-1 text-xs font-medium text-white bg-black/80 rounded-md shadow-lg whitespace-nowrap transform" switch (position) { case "top": return `${baseClass} -translate-x-1/2 -translate-y-full` case "right": return `${baseClass} translate-y-[-50%]` case "bottom": return `${baseClass} -translate-x-1/2` case "left": return `${baseClass} -translate-x-full translate-y-[-50%]` default: return baseClass } } return (

{children} {mounted && isVisible && createPortal(

{text}

, document.body, )}

) } [V0_FILE]typescriptreact:file="components/simple-tooltip.tsx" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" interface SimpleTooltipProps { text: string position?: "top" | "right" | "bottom" | "left" children: React.ReactNode } export const SimpleTooltip: React.FC = ({ text, position = "top", children }) => { const [isHovered, setIsHovered] = useState(false) const [isMounted, setIsMounted] = useState(false) useEffect(() => { setIsMounted(true) }, []) if (!isMounted) { return <>{children} } return (

setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} onFocus={() => setIsHovered(true)} onBlur={() => setIsHovered(false)} > {children} {isHovered && (

{text}

)}

) } [V0_FILE]typescript:file="lib/actions.ts" isFixed="true" isQuickEdit="true" isMerged="true" // This file re-exports all actions from the actions directory // It's kept for backward compatibility export * from "./actions/index" export type { SavedCreation } from "./types" [V0_FILE]typescriptreact:file="components/save-modal.tsx" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { saveCreation } from "@/lib/actions/save-creation" import { updateCreation } from "@/lib/actions/update-creation" import type { Brick } from "@/components/v0-blocks/events" import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" interface SaveModalProps { isOpen: boolean onClose: () => void bricks: Brick[] currentId?: string currentName?: string } export const SaveModal: React.FC = ({ isOpen, onClose, bricks, currentId, currentName = "" }) => { const [name, setName] = useState(currentName) const [isSaving, setIsSaving] = useState(false) const [message, setMessage] = useState("") const [isSuccess, setIsSuccess] = useState(false) // Update name when currentName changes useEffect(() => { setName(currentName || "") }, [currentName]) const handleSave = async () => { if (!name.trim()) { setMessage("Please enter a name for your creation") setIsSuccess(false) return } setIsSaving(true) setMessage("") try { const result = currentId ? await updateCreation(currentId, name, bricks) : await saveCreation(name, bricks) setIsSuccess(result.success) setMessage(result.message || "") if (result.success) { // Close modal after a short delay setTimeout(() => { onClose() }, 1500) } } catch (error) { setIsSuccess(false) setMessage("An error occurred while saving") } finally { setIsSaving(false) } } return ( ) } [V0_FILE]typescript:file="package.json" isFixed="true" isQuickEdit="true" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.9.1", "@radix-ui/react-accordion": "^1.2.2", "@radix-ui/react-alert-dialog": "^1.1.4", "@radix-ui/react-aspect-ratio": "^1.1.1", "@radix-ui/react-avatar": "^1.1.2", "@radix-ui/react-checkbox": "^1.1.3", "@radix-ui/react-collapsible": "^1.1.2", "@radix-ui/react-context-menu": "^2.2.4", "@radix-ui/react-dialog": "^1.1.4", "@radix-ui/react-dropdown-menu": "^2.1.4", "@radix-ui/react-hover-card": "^1.1.4", "@radix-ui/react-label": "^2.1.1", "@radix-ui/react-menubar": "^1.1.4", "@radix-ui/react-navigation-menu": "^1.2.3", "@radix-ui/react-popover": "^1.1.4", "@radix-ui/react-progress": "^1.1.1", "@radix-ui/react-radio-group": "^1.2.2", "@radix-ui/react-scroll-area": "^1.2.2", "@radix-ui/react-select": "^2.1.4", "@radix-ui/react-separator": "^1.1.1", "@radix-ui/react-slider": "^1.2.2", "@radix-ui/react-slot": "^1.1.1", "@radix-ui/react-switch": "^1.1.2", "@radix-ui/react-tabs": "^1.1.2", "@radix-ui/react-toast": "^1.2.4", "@radix-ui/react-toggle": "^1.1.1", "@radix-ui/react-toggle-group": "^1.1.1", "@radix-ui/react-tooltip": "^1.1.6", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.16", "next-themes": "^0.4.4", "react": "^19", "react-day-picker": "8.10.1", "react-dom": "^19", "react-hook-form": "^7.54.1", "react-resizable-panels": "^2.1.7", "recharts": "2.15.0", "sonner": "^1.7.1", "tailwind-merge": "^2.5.5", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.6", "zod": "^3.24.1", "nanoid": "^5.0.4" }, "devDependencies": { "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8", "tailwindcss": "^3.4.17", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/load-modal.tsx" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { Trash2, Clock, RefreshCw } from "lucide-react" import { getCreations } from "@/lib/actions/get-creations" import { deleteCreation } from "@/lib/actions/delete-creation" import type { SavedCreation } from "@/lib/types" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" interface LoadModalProps { isOpen: boolean onClose: () => void onLoad: (creation: SavedCreation) => void } export const LoadModal: React.FC = ({ isOpen, onClose, onLoad }) => { const [creations, setCreations] = useState([]) const [isLoading, setIsLoading] = useState(false) const [error, setError] = useState("") const [isDeleting, setIsDeleting] = useState(null) useEffect(() => { if (isOpen) { loadCreations() } }, [isOpen]) const loadCreations = async () => { setIsLoading(true) setError("") try { const result = await getCreations(20, 0) if (result.success) { setCreations(result.creations || []) } else { setError(result.message || "Failed to load creations") } } catch (error) { setError("An error occurred while loading creations") } finally { setIsLoading(false) } } const handleDelete = async (id: string, e: React.MouseEvent) => { e.stopPropagation() if (isDeleting) return if (!confirm("Are you sure you want to delete this creation?")) { return } setIsDeleting(id) try { const result = await deleteCreation(id) if (result.success) { // Remove from local state setCreations(creations.filter((c) => c.id !== id)) } else { alert(result.message || "Failed to delete creation") } } catch (error) { alert("An error occurred while deleting the creation") } finally { setIsDeleting(null) } } const formatDate = (timestamp: number) => { return new Date(timestamp).toLocaleString() } // Skeleton loading component const CreationSkeleton = () => (

) return ( ) } [V0_FILE]typescriptreact:file="components/color-selector/types.ts" isMerged="true" export interface ColorSelectorProps { colors: string[] selectedColor: string onSelectColor: (color: string) => void onUndo: () => void onRedo: () => void canUndo: boolean canRedo: boolean width: number depth: number onWidthChange: (width: number) => void onDepthChange: (depth: number) => void onClearSet: () => void onPlayToggle: () => void isPlaying: boolean onSave: () => void onLoad: () => void currentCreationId?: string currentCreationName?: string currentTheme: ColorTheme onThemeChange: (theme: ColorTheme) => void bricksCount: number } export type ColorTheme = "default" | "muted" | "monochrome" export const COLOR_THEMES: Record = { default: [ "#FF3333", // Red "#FF9933", // Orange "#FFCC33", // Yellow "#33CC66", // Green "#33CCFF", // Light Blue "#3366CC", // Dark Blue "#9933CC", // Purple "#222222", // Black ], muted: [ "#CC6666", // Muted Red "#CC9966", // Muted Orange "#CCCC66", // Muted Yellow "#66CC99", // Muted Green "#66CCCC", // Muted Light Blue "#6699CC", // Muted Dark Blue "#9966CC", // Muted Purple "#444444", // Dark Gray ], monochrome: [ "#FFFFFF", // White "#DDDDDD", // Light Gray 1 "#BBBBBB", // Light Gray 2 "#999999", // Mid Gray 1 "#777777", // Mid Gray 2 "#555555", // Dark Gray 1 "#333333", // Dark Gray 2 "#111111", // Near Black ], } [V0_FILE]typescriptreact:file="components/v0-blocks/index.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useRef, useCallback, useEffect } from "react" import { Canvas } from "@react-three/fiber" import { OrbitControls } from "@react-three/drei" import { Pause } from "lucide-react" import { AudioPlayer } from "../audio-player" import { Scene } from "../scene" import { ColorSelector } from "../color-selector" import { ActionToolbar } from "../action-toolbar" import { SaveModal } from "../save-modal" import { LoadModal } from "../load-modal" import { ClearConfirmationModal } from "./clear-confirmation-modal" import { useKeyboardShortcuts } from "./use-keyboard-shortcuts" import { useColorTheme } from "./use-color-theme" import { useTouchHandling } from "./use-touch-handling" import { useLocalStorage } from "./use-local-storage" import { clearLocalStorage } from "@/lib/utils/local-storage" import type { SavedCreation } from "@/lib/types" import { type Brick, handleAddBrick, handleDeleteBrick, handleUpdateBrick, handleUndo, handleRedo, handleClearSet, handlePlayToggle, } from "./events" import { IntegrationCheckDialog } from "../integration-check-dialog" import { isKvConfigured } from "@/lib/utils/check-kv-integration" export default function V0Blocks() { // Theme and colors const { currentTheme, currentColors, selectedColor, setSelectedColor, handleSelectColor, handleThemeChange } = useColorTheme() // State const [bricks, setBricks] = useState([]) const [history, setHistory] = useState([[]]) const [historyIndex, setHistoryIndex] = useState(0) const [width, setWidth] = useState(2) const [depth, setDepth] = useState(2) const [isPlaying, setIsPlaying] = useState(false) const [interactionMode, setInteractionMode] = useState<"build" | "move" | "erase">("build") const orbitControlsRef = useRef() // Modal state const [showSaveModal, setShowSaveModal] = useState(false) const [showLoadModal, setShowLoadModal] = useState(false) const [showClearModal, setShowClearModal] = useState(false) const [currentCreationId, setCurrentCreationId] = useState() const [currentCreationName, setCurrentCreationName] = useState() // Add these state variables in the V0Blocks component after the other modal states const [showIntegrationDialog, setShowIntegrationDialog] = useState(false) const [integrationDialogType, setIntegrationDialogType] = useState<"save" | "load">("save") const [isKvAvailable, setIsKvAvailable] = useState(true) // Add this effect to check KV availability when the component mounts useEffect(() => { const checkKvAvailability = async () => { try { const available = await isKvConfigured() setIsKvAvailable(available) } catch (error) { console.error("Error checking KV availability:", error) setIsKvAvailable(false) } } checkKvAvailability() }, []) // Set up touch handling useTouchHandling() // Set up localStorage persistence useLocalStorage({ bricks, width, depth, selectedColor, currentTheme, currentCreationId, currentCreationName, setBricks, setWidth, setDepth, setSelectedColor, handleThemeChange, setCurrentCreationId, setCurrentCreationName, setHistory, setHistoryIndex, }) // Wrapper functions that call the imported event handlers with the current state const onAddBrick = useCallback( (brick: Brick) => { handleAddBrick(brick, bricks, setBricks, history, historyIndex, setHistory, setHistoryIndex) }, [bricks, history, historyIndex], ) const onDeleteBrick = useCallback( (index: number) => { handleDeleteBrick(index, bricks, setBricks, history, historyIndex, setHistory, setHistoryIndex) }, [bricks, history, historyIndex], ) const onUpdateBrick = useCallback( (index: number, newPosition: [number, number, number]) => { handleUpdateBrick(index, newPosition, bricks, setBricks, history, historyIndex, setHistory, setHistoryIndex) }, [bricks, history, historyIndex], ) const onUndo = useCallback(() => { console.log("Undo triggered") handleUndo(historyIndex, setHistoryIndex, history, setBricks) }, [history, historyIndex]) const onRedo = useCallback(() => { console.log("Redo triggered") handleRedo(historyIndex, setHistoryIndex, history, setBricks) }, [history, historyIndex]) const onClearSet = useCallback(() => { console.log("Clear set triggered") handleClearSet(setBricks, setHistory, setHistoryIndex) // Clear current creation info when clearing the set setCurrentCreationId(undefined) setCurrentCreationName(undefined) // Clear localStorage clearLocalStorage() // Close the modal setShowClearModal(false) }, []) const handleClearWithConfirmation = useCallback(() => { if (bricks.length > 0) { setShowClearModal(true) } }, [bricks.length]) const onPlayToggle = useCallback(() => { console.log("Play toggle triggered") handlePlayToggle(isPlaying, setIsPlaying) }, [isPlaying]) const handleModeChange = useCallback((mode: "build" | "move" | "erase") => { setInteractionMode(mode) }, []) // Save/Load handlers const handleSave = useCallback(() => { if (!isKvAvailable) { setIntegrationDialogType("save") setShowIntegrationDialog(true) } else { setShowSaveModal(true) } }, [isKvAvailable]) // Replace the handleLoad function with this const handleLoad = useCallback(() => { if (!isKvAvailable) { setIntegrationDialogType("load") setShowIntegrationDialog(true) } else { setShowLoadModal(true) } }, [isKvAvailable]) const handleLoadCreation = useCallback((creation: SavedCreation) => { // Load the creation setBricks(creation.bricks) // Update history const newHistory = [[...creation.bricks]] setHistory(newHistory) setHistoryIndex(0) // Update current creation info setCurrentCreationId(creation.id) setCurrentCreationName(creation.name) // Close the modal setShowLoadModal(false) }, []) // Set up keyboard shortcuts useKeyboardShortcuts({ isPlaying, width, depth, currentColors, setWidth, setDepth, setSelectedColor, setInteractionMode, onUndo, onRedo, onPlayToggle, handleClearWithConfirmation, handleSave, handleLoad, currentTheme, handleThemeChange, }) return (

e.preventDefault()} // Prevent context menu on right-click >

{!isPlaying && ( <> 0} canRedo={historyIndex < history.length - 1} width={width} depth={depth} onWidthChange={setWidth} onDepthChange={setDepth} onClearSet={handleClearWithConfirmation} onPlayToggle={onPlayToggle} isPlaying={isPlaying} onSave={handleSave} onLoad={handleLoad} currentCreationId={currentCreationId} currentCreationName={currentCreationName} currentTheme={currentTheme} onThemeChange={handleThemeChange} bricksCount={bricks.length} /> )} {isPlaying && ( )} {/* Modals */} setShowSaveModal(false)} bricks={bricks} currentId={currentCreationId} currentName={currentCreationName} /> setShowLoadModal(false)} onLoad={handleLoadCreation} /> setShowClearModal(false)} onClear={onClearSet} /> setShowIntegrationDialog(false)} actionType={integrationDialogType} />

) } [V0_FILE]typescriptreact:file="components/color-selector/index.tsx" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import type { ColorSelectorProps } from "./types" import { HistoryControls } from "./history-controls" import { ColorPicker } from "./color-picker" import { DimensionControls } from "./dimension-controls" import { FileControls } from "./file-controls" import { ActionControls } from "./action-controls" import { MobileMenu } from "./mobile-menu" export const ColorSelector: React.FC = ({ colors, selectedColor, onSelectColor, onUndo, onRedo, canUndo, canRedo, width, depth, onWidthChange, onDepthChange, onClearSet, onPlayToggle, isPlaying, onSave, onLoad, currentCreationId, currentCreationName, currentTheme, onThemeChange, bricksCount, }) => { const [isMobile, setIsMobile] = useState(false) // Handle client-side mounting and detect mobile useEffect(() => { const checkMobile = () => { setIsMobile(window.innerWidth < 768) } checkMobile() window.addEventListener("resize", checkMobile) return () => window.removeEventListener("resize", checkMobile) }, []) return (

{/* Main Controls Panel - Very rounded with smaller padding */}

{/* History Controls */}

{/* Color Selector */}

{/* Dimension Controls */}

{/* Desktop: Save/Load Controls */} {!isMobile && ( <>

)} {/* Desktop: Action Buttons */} {!isMobile && ( 0} /> )} {/* Mobile: Menu Button */} {isMobile && ( 0} /> )}

) } [V0_FILE]typescript:file="lib/utils/lighten-color.ts" isMerged="true" /** * Lightens a hex color by a specified percentage * @param color Hex color string (e.g. "#FF0000") * @param percent Percentage to lighten (0-100) * @returns Lightened hex color string */ export function lightenColor(color: string, percent: number): string { // Convert hex to RGB const hex = color.replace("#", "") let r = Number.parseInt(hex.substring(0, 2), 16) let g = Number.parseInt(hex.substring(2, 4), 16) let b = Number.parseInt(hex.substring(4, 6), 16) // Lighten the color r = Math.min(255, Math.floor(r + (255 - r) * (percent / 100))) g = Math.min(255, Math.floor(g + (255 - g) * (percent / 100))) b = Math.min(255, Math.floor(b + (255 - b) * (percent / 100))) // Convert back to hex return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}` } [V0_FILE]typescriptreact:file="components/color-selector/mobile-menu.tsx" isMerged="true" "use client" import type React from "react" import { Play, Trash2, Save, FolderOpen, Menu } from "lucide-react" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" interface MobileMenuProps { onPlayToggle: () => void isPlaying: boolean onSave: () => void onLoad: () => void onClearSet: () => void hasBricks: boolean } export const MobileMenu: React.FC = ({ onPlayToggle, isPlaying, onSave, onLoad, onClearSet, hasBricks, }) => { return (

) } [V0_FILE]typescriptreact:file="components/color-selector/clear-modal.tsx" isMerged="true" "use client" import type React from "react" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" interface ClearModalProps { isOpen: boolean onClose: () => void onClear: () => void } export const ClearModal: React.FC = ({ isOpen, onClose, onClear }) => { return ( ) } [V0_FILE]typescriptreact:file="components/v0-blocks/clear-confirmation-modal.tsx" isMerged="true" "use client" import type React from "react" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" interface ClearConfirmationModalProps { isOpen: boolean onClose: () => void onClear: () => void } export const ClearConfirmationModal: React.FC = ({ isOpen, onClose, onClear }) => { // Create a handler that prevents event propagation const handleClear = (e: React.MouseEvent) => { e.preventDefault() e.stopPropagation() onClear() } return ( ) } [V0_FILE]typescriptreact:file="components/v0-blocks/use-keyboard-shortcuts.ts" isMerged="true" "use client" import { useEffect } from "react" // Helper function to check if we're currently focused on an input element function isInputElement(): boolean { const activeElement = document.activeElement if (!activeElement) return false const tagName = activeElement.tagName.toLowerCase() const isEditable = activeElement.hasAttribute("contenteditable") && activeElement.getAttribute("contenteditable") !== "false" return tagName === "input" || tagName === "textarea" || tagName === "select" || isEditable } interface KeyboardShortcutsProps { isPlaying: boolean width: number depth: number currentColors: string[] setWidth: (width: number | ((prev: number) => number)) => void setDepth: (depth: number | ((prev: number) => number)) => void setSelectedColor: (color: string) => void setInteractionMode: (mode: "build" | "move" | "erase") => void onUndo: () => void onRedo: () => void onPlayToggle: () => void handleClearWithConfirmation: () => void handleSave: () => void handleLoad: () => void currentTheme: string handleThemeChange: (theme: string) => void } export function useKeyboardShortcuts({ isPlaying, width, depth, currentColors, setWidth, setDepth, setSelectedColor, setInteractionMode, onUndo, onRedo, onPlayToggle, handleClearWithConfirmation, handleSave, handleLoad, currentTheme, handleThemeChange, }: KeyboardShortcutsProps) { useEffect(() => { const handleKeyDown = (event: KeyboardEvent) => { // Skip keyboard shortcuts when playing if (isPlaying) return // Skip keyboard shortcuts when typing in an input field if (isInputElement()) return // Swap dimensions with S key if (event.key === "S" || event.key === "s") { setWidth((prevWidth) => depth) setDepth((prevDepth) => width) } // Switch to Build mode with B key if (event.key === "B" || event.key === "b") { setInteractionMode("build") } // Switch to Move mode with M key if (event.key === "M" || event.key === "m") { setInteractionMode("move") } // Switch to Erase mode with E key if (event.key === "E" || event.key === "e") { setInteractionMode("erase") } // Cycle through color themes with C key if (event.key === "C" || event.key === "c") { const themes = ["default", "muted", "monochrome"] const currentIndex = themes.indexOf(currentTheme) const nextIndex = (currentIndex + 1) % themes.length handleThemeChange(themes[nextIndex]) } // Decrease width with [ key if (event.key === "[" && !event.shiftKey) { setWidth((prevWidth) => Math.max(1, prevWidth - 1)) } // Increase width with ] key if (event.key === "]" && !event.shiftKey) { setWidth((prevWidth) => Math.min(20, prevWidth + 1)) } // Decrease depth with ; key if (event.key === ";") { setDepth((prevDepth) => Math.max(1, prevDepth - 1)) } // Increase depth with ' key if (event.key === "'") { setDepth((prevDepth) => Math.min(20, prevDepth + 1)) } // Color selection with number keys 1-8 if (event.key >= "1" && event.key <= "8") { const colorIndex = Number.parseInt(event.key) - 1 if (colorIndex >= 0 && colorIndex < currentColors.length) { setSelectedColor(currentColors[colorIndex]) } } // Undo: CMD+Z (Mac) or CTRL+Z (Windows) if ((event.metaKey || event.ctrlKey) && !event.shiftKey && event.key.toLowerCase() === "z") { event.preventDefault() console.log("CMD+Z pressed") onUndo() } // Redo: CMD+SHIFT+Z (Mac) or CTRL+SHIFT+Z (Windows) if ((event.metaKey || event.ctrlKey) && event.shiftKey && event.key.toLowerCase() === "z") { event.preventDefault() console.log("CMD+SHIFT+Z pressed") onRedo() } // Keep CMD+Y as an alternative for redo for backward compatibility if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "y") { event.preventDefault() console.log("CMD+Y pressed") onRedo() } // Play: CMD+Enter if ((event.metaKey || event.ctrlKey) && event.key === "Enter") { event.preventDefault() console.log("CMD+Enter pressed") onPlayToggle() } // Clear: CMD+Delete or CMD+Backspace if ((event.metaKey || event.ctrlKey) && (event.key === "Delete" || event.key === "Backspace")) { event.preventDefault() console.log("CMD+Delete pressed") handleClearWithConfirmation() } // Save: CMD+S if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "s") { event.preventDefault() console.log("CMD+S pressed") handleSave() } // Load: CMD+O if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "o") { event.preventDefault() console.log("CMD+O pressed") handleLoad() } } window.addEventListener("keydown", handleKeyDown) return () => window.removeEventListener("keydown", handleKeyDown) }, [ isPlaying, width, depth, currentColors, setWidth, setDepth, setSelectedColor, setInteractionMode, onUndo, onRedo, onPlayToggle, handleClearWithConfirmation, handleSave, handleLoad, currentTheme, handleThemeChange, ]) } [V0_FILE]typescript:file="components/v0-blocks/use-color-theme.ts" isMerged="true" "use client" import { useState, useEffect, useCallback } from "react" import { COLOR_THEMES } from "../color-selector/types" import type { ColorTheme } from "../color-selector/types" export function useColorTheme() { const [currentTheme, setCurrentTheme] = useState("default") const [currentColors, setCurrentColors] = useState(COLOR_THEMES[currentTheme]) const [selectedColor, setSelectedColor] = useState(currentColors[0]) // Update currentColors when theme changes useEffect(() => { const newColors = COLOR_THEMES[currentTheme] setCurrentColors(newColors) // Find the closest color in the new theme to the currently selected color const oldColorIndex = COLOR_THEMES["default"].indexOf(selectedColor) const mutedColorIndex = COLOR_THEMES["muted"].indexOf(selectedColor) const monoColorIndex = COLOR_THEMES["monochrome"].indexOf(selectedColor) // If the color exists in any theme, use its index to select the corresponding color in the new theme if (oldColorIndex !== -1) { setSelectedColor(newColors[oldColorIndex]) } else if (mutedColorIndex !== -1) { setSelectedColor(newColors[mutedColorIndex]) } else if (monoColorIndex !== -1) { setSelectedColor(newColors[monoColorIndex]) } else { // If not found in any theme, default to the first color in the new theme setSelectedColor(newColors[0]) } }, [currentTheme, selectedColor]) // Handle color selection with updated theme colors const handleSelectColor = useCallback((color: string) => { setSelectedColor(color) }, []) // Handle theme change const handleThemeChange = useCallback((theme: ColorTheme) => { setCurrentTheme(theme) }, []) return { currentTheme, currentColors, selectedColor, setSelectedColor, handleSelectColor, handleThemeChange, } } [V0_FILE]typescriptreact:file="components/v0-blocks/use-touch-handling.ts" isMerged="true" "use client" import { useEffect } from "react" export function useTouchHandling() { // Prevent text selection on mobile, but allow button clicks useEffect(() => { const preventDefaultTouchAction = (e: TouchEvent) => { // Don't prevent default for buttons and interactive elements const target = e.target as HTMLElement const isInteractive = target.tagName === "BUTTON" || target.closest("button") || target.closest('[role="button"]') || target.closest(".bg-white") || // Allow interaction with the control panel target.closest("[data-radix-popper-content-wrapper]") // Allow interaction with popover content if (!isInteractive) { e.preventDefault() } } // Prevent scrolling on document body document.body.style.overflow = "hidden" document.documentElement.style.overflow = "hidden" // Prevent pull-to-refresh and other browser gestures document.addEventListener("gesturestart", preventDefaultTouchAction, { passive: false }) document.addEventListener("gesturechange", preventDefaultTouchAction, { passive: false }) document.addEventListener("gestureend", preventDefaultTouchAction, { passive: false }) // Add event listeners to prevent default touch actions document.addEventListener("touchstart", preventDefaultTouchAction, { passive: false }) document.addEventListener("touchmove", preventDefaultTouchAction, { passive: false }) document.addEventListener("touchend", preventDefaultTouchAction, { passive: false }) return () => { // Clean up event listeners document.body.style.overflow = "" document.documentElement.style.overflow = "" document.removeEventListener("gesturestart", preventDefaultTouchAction) document.removeEventListener("gesturechange", preventDefaultTouchAction) document.removeEventListener("gestureend", preventDefaultTouchAction) document.removeEventListener("touchstart", preventDefaultTouchAction) document.removeEventListener("touchmove", preventDefaultTouchAction) document.removeEventListener("touchend", preventDefaultTouchAction) } }, []) } [V0_FILE]typescript:file="lib/actions/save-creation.ts" isMerged="true" "use server" import { kv } from "@vercel/kv" import { nanoid } from "nanoid" import { revalidatePath } from "next/cache" import type { Brick } from "@/components/v0-blocks/events" import type { SavedCreation } from "../types" // Save the current blocks to Redis export async function saveCreation(name: string, bricks: Brick[]) { try { const id = nanoid(10) const timestamp = Date.now() const creation: SavedCreation = { id, name, bricks, createdAt: timestamp, updatedAt: timestamp, } // Save to Redis await kv.set(`creation:${id}`, JSON.stringify(creation)) // Add to list of creations await kv.zadd("creations", { score: timestamp, member: id }) revalidatePath("/") return { success: true, id, message: "Creation saved successfully!" } } catch (error) { console.error("Error saving creation:", error) return { success: false, message: "Failed to save creation." } } } [V0_FILE]typescript:file="lib/actions/update-creation.ts" isMerged="true" "use server" import { kv } from "@vercel/kv" import { revalidatePath } from "next/cache" import type { Brick } from "@/components/v0-blocks/events" import type { SavedCreation } from "../types" // Update an existing creation export async function updateCreation(id: string, name: string, bricks: Brick[]) { try { // Get the existing creation const existingCreationStr = await kv.get(`creation:${id}`) if (!existingCreationStr) { return { success: false, message: "Creation not found." } } const existingCreation = typeof existingCreationStr === "string" ? JSON.parse(existingCreationStr) : (existingCreationStr as SavedCreation) const timestamp = Date.now() const updatedCreation: SavedCreation = { ...existingCreation, name, bricks, updatedAt: timestamp, } // Update in Redis await kv.set(`creation:${id}`, JSON.stringify(updatedCreation)) // Update score in sorted set await kv.zadd("creations", { score: timestamp, member: id }) revalidatePath("/") return { success: true, id, message: "Creation updated successfully!" } } catch (error) { console.error("Error updating creation:", error) return { success: false, message: "Failed to update creation." } } } [V0_FILE]typescript:file="lib/actions/get-creation.ts" isMerged="true" "use server" import { kv } from "@vercel/kv" import type { SavedCreation } from "../types" // Get a specific creation by ID export async function getCreation(id: string) { try { const creationData = await kv.get(`creation:${id}`) if (!creationData) { return { success: false, message: "Creation not found." } } const creation = typeof creationData === "string" ? JSON.parse(creationData) : (creationData as SavedCreation) return { success: true, creation } } catch (error) { console.error("Error getting creation:", error) return { success: false, message: "Failed to get creation." } } } [V0_FILE]typescript:file="lib/actions/get-creations.ts" isMerged="true" "use server" import { kv } from "@vercel/kv" import type { SavedCreation } from "../types" // Get all creations (with pagination) export async function getCreations(limit = 10, offset = 0) { try { // Get IDs from sorted set (newest first) const ids = await kv.zrange("creations", offset, offset + limit - 1, { rev: true }) if (!ids || ids.length === 0) { return { success: true, creations: [] } } // Get all creations in parallel const creationsPromises = ids.map((id) => kv.get(`creation:${id}`)) const creationsData = await Promise.all(creationsPromises) // Parse JSON data safely const creations = creationsData .filter((data) => data !== null) .map((data) => { // Handle both string and object formats if (typeof data === "string") { try { return JSON.parse(data) as SavedCreation } catch (e) { console.error("Error parsing creation data:", e) return null } } else { return data as SavedCreation } }) .filter(Boolean) as SavedCreation[] return { success: true, creations } } catch (error) { console.error("Error getting creations:", error) return { success: false, message: `Failed to get creations: ${error.message}` } } } [V0_FILE]typescript:file="lib/actions/delete-creation.ts" isMerged="true" "use server" import { kv } from "@vercel/kv" import { revalidatePath } from "next/cache" // Delete a creation export async function deleteCreation(id: string) { try { // Delete from Redis await kv.del(`creation:${id}`) // Remove from sorted set await kv.zrem("creations", id) revalidatePath("/") return { success: true, message: "Creation deleted successfully!" } } catch (error) { console.error("Error deleting creation:", error) return { success: false, message: "Failed to delete creation." } } } [V0_FILE]typescript:file="lib/actions/index.ts" isMerged="true" export * from "./save-creation" export * from "./update-creation" export * from "./get-creation" export * from "./get-creations" export * from "./delete-creation" [V0_FILE]typescript:file="lib/types.ts" isMerged="true" import type { Brick } from "@/components/v0-blocks/events" // Type for saved creation export type SavedCreation = { id: string name: string bricks: Brick[] createdAt: number updatedAt: number } [V0_FILE]typescript:file="lib/utils/local-storage.ts" isMerged="true" import type { Brick } from "@/components/v0-blocks/events" const LOCAL_STORAGE_KEY = "v0-blocks-state" export interface LocalStorageState { bricks: Brick[] width: number height: number selectedColor: string currentTheme: string creationId?: string creationName?: string } export function saveToLocalStorage(state: LocalStorageState): boolean { try { const serializedState = JSON.stringify(state) localStorage.setItem(LOCAL_STORAGE_KEY, serializedState) return true } catch (error) { console.error("Error saving to localStorage:", error) return false } } export function loadFromLocalStorage(): LocalStorageState | null { try { const serializedState = localStorage.getItem(LOCAL_STORAGE_KEY) if (!serializedState) return null return JSON.parse(serializedState) as LocalStorageState } catch (error) { console.error("Error loading from localStorage:", error) return null } } export function clearLocalStorage(): boolean { try { localStorage.removeItem(LOCAL_STORAGE_KEY) return true } catch (error) { console.error("Error clearing localStorage:", error) return false } } export function isLocalStorageAvailable(): boolean { try { const testKey = "__test__" localStorage.setItem(testKey, testKey) localStorage.removeItem(testKey) return true } catch (e) { return false } } [V0_FILE]typescriptreact:file="components/v0-blocks/use-local-storage.ts" isMerged="true" "use client" import { useEffect, useRef } from "react" import type { Brick } from "./events" import type { ColorTheme } from "../color-selector/types" import { saveToLocalStorage, loadFromLocalStorage, isLocalStorageAvailable } from "@/lib/utils/local-storage" interface UseLocalStorageProps { bricks: Brick[] width: number depth: number selectedColor: string currentTheme: ColorTheme currentCreationId?: string currentCreationName?: string setBricks: (bricks: Brick[]) => void setWidth: (width: number) => void setDepth: (depth: number) => void setSelectedColor: (color: string) => void handleThemeChange: (theme: ColorTheme) => void setCurrentCreationId: (id?: string) => void setCurrentCreationName: (name?: string) => void setHistory: (history: Brick[][]) => void setHistoryIndex: (index: number) => void } export function useLocalStorage({ bricks, width, depth, selectedColor, currentTheme, currentCreationId, currentCreationName, setBricks, setWidth, setDepth, setSelectedColor, handleThemeChange, setCurrentCreationId, setCurrentCreationName, setHistory, setHistoryIndex, }: UseLocalStorageProps) { const hasLocalStorage = useRef(false) const isInitialLoad = useRef(true) const saveTimeoutRef = useRef(null) // Check if localStorage is available useEffect(() => { hasLocalStorage.current = isLocalStorageAvailable() }, []) // Load data from localStorage on initial mount useEffect(() => { if (!hasLocalStorage.current) return if (isInitialLoad.current) { const savedState = loadFromLocalStorage() if (savedState) { // Only restore if there are bricks to restore if (savedState.bricks && savedState.bricks.length > 0) { setBricks(savedState.bricks) setWidth(savedState.width || 2) setDepth(savedState.height || 2) setSelectedColor(savedState.selectedColor || "#FF3333") if (savedState.currentTheme) { handleThemeChange(savedState.currentTheme as ColorTheme) } if (savedState.creationId) { setCurrentCreationId(savedState.creationId) } if (savedState.creationName) { setCurrentCreationName(savedState.creationName) } // Initialize history with the loaded bricks setHistory([[...savedState.bricks]]) setHistoryIndex(0) } } isInitialLoad.current = false } }, [ setBricks, setWidth, setDepth, setSelectedColor, handleThemeChange, setCurrentCreationId, setCurrentCreationName, setHistory, setHistoryIndex, ]) // Save data to localStorage whenever state changes (debounced) useEffect(() => { if (!hasLocalStorage.current || isInitialLoad.current) return // Clear any existing timeout if (saveTimeoutRef.current) { clearTimeout(saveTimeoutRef.current) } // Set a new timeout to save after 500ms of inactivity saveTimeoutRef.current = setTimeout(() => { saveToLocalStorage({ bricks, width, height: depth, selectedColor, currentTheme, creationId: currentCreationId, creationName: currentCreationName, }) }, 500) // Cleanup timeout on unmount return () => { if (saveTimeoutRef.current) { clearTimeout(saveTimeoutRef.current) } } }, [bricks, width, depth, selectedColor, currentTheme, currentCreationId, currentCreationName]) } [V0_FILE]typescriptreact:file="components/scene/index.tsx" isMerged="true" "use client" import type React from "react" import { Environment, SoftShadows } from "@react-three/drei" import type { SceneProps } from "./types" import { LargePlane } from "../large-plane" import { Platform } from "../platform" import { BuildMode } from "./build-mode" import { EraseMode } from "./erase-mode" import { LightingSetup } from "./lighting-setup" import { useSceneInteraction } from "./use-scene-interaction" import { Block } from "../block" import { GRID_SIZE } from "@/constants" export const Scene: React.FC = ({ bricks, selectedColor, width, depth, onAddBrick, onDeleteBrick, onUndo, onRedo, isPlaying, interactionMode = "build", }) => { const { currentBrickPosition, isValid, showNewBrick, hoveredBrickIndex, handleClick, handleTouchStart, handleTouchMove, handleTouchEnd, handleBrickClick, planeRef, } = useSceneInteraction({ bricks, width, depth, selectedColor, onAddBrick, onDeleteBrick, isPlaying, interactionMode, }) return ( <> {/* Render all bricks */} {bricks.map((brick, index) => ( handleBrickClick(index)} /> ))} {/* Render appropriate mode components */} {interactionMode === "build" && !isPlaying && ( )} {interactionMode === "erase" && !isPlaying && } {/* The plane is always present but only interactive when not playing and in build mode */} ) } [V0_FILE]typescriptreact:file="components/scene/build-mode.tsx" isMerged="true" "use client" import type React from "react" import { Block } from "../block" import { HighlightSquare } from "../highlight-square" interface BuildModeProps { showNewBrick: boolean isValid: boolean currentBrickPosition: [number, number, number] selectedColor: string width: number depth: number } export const BuildMode: React.FC = ({ showNewBrick, isValid, currentBrickPosition, selectedColor, width, depth, }) => { if (!showNewBrick) return null return ( <> ) } [V0_FILE]typescriptreact:file="components/scene/erase-mode.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" export const EraseMode: React.FC = () => { return null } [V0_FILE]typescriptreact:file="components/scene/lighting-setup.tsx" isMerged="true" "use client" import type React from "react" import { useRef } from "react" import * as THREE from "three" import { useFrame, useThree } from "@react-three/fiber" export const LightingSetup: React.FC = () => { const { camera } = useThree() const directionalLightRef = useRef(null) useFrame(() => { // Update directional light to follow camera somewhat if (directionalLightRef.current) { const lightPos = new THREE.Vector3( camera.position.x * 0.5 + 5, Math.max(8, camera.position.y * 0.5), camera.position.z * 0.5 + 5, ) directionalLightRef.current.position.copy(lightPos) directionalLightRef.current.lookAt(0, 0, 0) } }) return ( <> {/* Reduced ambient light intensity for better shadows */} {/* Main directional light with improved shadow settings */} {/* Secondary fill light from opposite direction */} ) } [V0_FILE]typescriptreact:file="components/scene/use-scene-interaction.ts" isMerged="true" "use client" import { useState, useRef, useEffect } from "react" import * as THREE from "three" import { useFrame, useThree } from "@react-three/fiber" import { GRID_SIZE, BRICK_HEIGHT, LAYER_GAP, GROUND_HEIGHT } from "@/lib/constants" import type { Brick } from "@/components/v0-blocks/events" interface UseSceneInteractionProps { bricks: Brick[] width: number depth: number selectedColor: string onAddBrick: (brick: Brick) => void onDeleteBrick?: (index: number) => void isPlaying: boolean interactionMode: "build" | "move" | "erase" } export function useSceneInteraction({ bricks, width, depth, selectedColor, onAddBrick, onDeleteBrick, isPlaying, interactionMode, }: UseSceneInteractionProps) { const [currentBrickPosition, setCurrentBrickPosition] = useState<[number, number, number]>([ 0, GROUND_HEIGHT / 2 + BRICK_HEIGHT / 2, 0, ]) const [isPlacing, setIsPlacing] = useState(true) const [isValid, setIsValid] = useState(true) const [showNewBrick, setShowNewBrick] = useState(true) const [hoveredBrickIndex, setHoveredBrickIndex] = useState(null) const [touchedBrickIndex, setTouchedBrickIndex] = useState(null) const [isDeleting, setIsDeleting] = useState(false) const [isMobile, setIsMobile] = useState(false) // Touch interaction tracking const [touchStartPosition, setTouchStartPosition] = useState<{ x: number; y: number } | null>(null) const [hasMoved, setHasMoved] = useState(false) const touchMoveThreshold = 10 // pixels const { camera, raycaster, mouse } = useThree() const planeRef = useRef(null) // Detect mobile device useEffect(() => { const checkMobile = () => { setIsMobile(window.innerWidth < 768) } checkMobile() window.addEventListener("resize", checkMobile) return () => window.removeEventListener("resize", checkMobile) }, []) // Reset hovered brick index when bricks array changes (after deletion) useEffect(() => { if (isDeleting) { setHoveredBrickIndex(null) setTouchedBrickIndex(null) setIsDeleting(false) } }, [bricks, isDeleting]) // Reset hovered brick index when interaction mode changes useEffect(() => { setHoveredBrickIndex(null) setTouchedBrickIndex(null) // Reset the plane's raycast behavior when switching modes if (planeRef.current) { if (interactionMode === "build") { // Restore the original raycast function for build mode if ((planeRef.current as any)._originalRaycast) { planeRef.current.raycast = (planeRef.current as any)._originalRaycast ;(planeRef.current as any)._originalRaycast = null } } else { // Store the original raycast function if not already stored if (!(planeRef.current as any)._originalRaycast) { const originalRaycast = planeRef.current.raycast ;(planeRef.current as any)._originalRaycast = originalRaycast // Set a dummy raycast function that does nothing for non-build modes planeRef.current.raycast = () => {} } } } }, [interactionMode]) const snapToGrid = (value: number, size: number) => { const isOdd = size % 2 !== 0 const snappedValue = Math.round(value) return isOdd ? snappedValue - 0.5 : snappedValue } const isValidPlacement = (position: [number, number, number], width: number, depth: number) => { const [x, y, z] = position const left = Math.floor(x - width / 2) const right = Math.ceil(x + width / 2) const top = Math.floor(z - depth / 2) const bottom = Math.ceil(z + depth / 2) if (left < -GRID_SIZE / 2 || right > GRID_SIZE / 2 || top < -GRID_SIZE / 2 || bottom > GRID_SIZE / 2) { return false } return !bricks.some((brick) => { const brickLeft = Math.floor(brick.position[0] - brick.width / 2) const brickRight = Math.ceil(brick.position[0] + brick.width / 2) const brickTop = Math.floor(brick.position[2] - brick.height / 2) const brickBottom = Math.ceil(brick.position[2] + brick.height / 2) const horizontalOverlap = left < brickRight && right > brickLeft const verticalOverlap = top < brickBottom && bottom > brickTop const sameLayer = Math.abs(y - brick.position[1]) < 0.1 return horizontalOverlap && verticalOverlap && sameLayer }) } const findHighestBrick = (x: number, z: number, width: number, depth: number) => { const relevantBricks = bricks.filter((brick) => { const horizontalOverlap = Math.abs(brick.position[0] - x) < (width + brick.width) / 2 const verticalOverlap = Math.abs(brick.position[2] - z) < (depth + brick.height) / 2 return horizontalOverlap && verticalOverlap }) if (relevantBricks.length === 0) return GROUND_HEIGHT / 2 + BRICK_HEIGHT / 2 return Math.max(...relevantBricks.map((brick) => brick.position[1])) + BRICK_HEIGHT + LAYER_GAP } // Find the brick at the current pointer position const findBrickAtPointer = () => { // Create a temporary array to store distances to each brick const intersectedBricks: { index: number; distance: number }[] = [] // Check for intersections with each brick bricks.forEach((brick, index) => { // Create a box that represents the brick for intersection testing const brickBox = new THREE.Box3().setFromCenterAndSize( new THREE.Vector3(brick.position[0], brick.position[1], brick.position[2]), new THREE.Vector3(brick.width, BRICK_HEIGHT, brick.height), ) // Check if the ray intersects the brick box const intersectionPoint = new THREE.Vector3() if (raycaster.ray.intersectBox(brickBox, intersectionPoint)) { // Calculate distance from camera to intersection point const distance = raycaster.ray.origin.distanceTo(intersectionPoint) intersectedBricks.push({ index, distance }) } }) // Sort by distance and return the closest brick (not the furthest) if (intersectedBricks.length > 0) { intersectedBricks.sort((a, b) => a.distance - b.distance) return intersectedBricks[0].index } return null } useFrame(() => { // Skip raycaster calculations when in play mode or when deleting if (isPlaying || isDeleting) return // Set up raycaster raycaster.setFromCamera(mouse, camera) // Handle build mode if (interactionMode === "build" && isPlacing && planeRef.current) { const intersects = raycaster.intersectObject(planeRef.current) if (intersects.length > 0) { const { x, z } = intersects[0].point const snappedX = snapToGrid(x, width) const snappedZ = snapToGrid(z, depth) const highestPoint = findHighestBrick(snappedX, snappedZ, width, depth) const newPosition: [number, number, number] = [snappedX, highestPoint, snappedZ] setCurrentBrickPosition(newPosition) setIsValid(isValidPlacement(newPosition, width, depth)) } } // Handle erase mode - check for brick intersections // Only highlight bricks on desktop, not on mobile if (interactionMode === "erase" && !isDeleting && !touchedBrickIndex && !isMobile) { // Reset hovered brick index setHoveredBrickIndex(null) // Find brick at pointer const brickIndex = findBrickAtPointer() if (brickIndex !== null) { setHoveredBrickIndex(brickIndex) } } }) const handleClick = (event: THREE.MouseEvent) => { // Prevent default behavior to avoid unintended actions event.stopPropagation() if (isPlaying) return if (interactionMode === "build" && isPlacing && isValid && showNewBrick) { onAddBrick({ color: selectedColor, position: currentBrickPosition, width, height: depth }) } } // Touch handlers for mobile const handleTouchStart = (event: THREE.ThreeEvent) => { if (isPlaying) return // Record the starting position for all modes setTouchStartPosition({ x: event.clientX, y: event.clientY }) setHasMoved(false) if (interactionMode === "erase" && isMobile) { // For erase mode on mobile, we'll check for brick deletion in handleTouchEnd // to avoid accidental deletions when trying to rotate the camera raycaster.setFromCamera(mouse, camera) const brickIndex = findBrickAtPointer() if (brickIndex !== null) { setTouchedBrickIndex(brickIndex) } } else if (interactionMode === "erase" && !isMobile) { // For erase mode on desktop, find and highlight the brick on touch start raycaster.setFromCamera(mouse, camera) const brickIndex = findBrickAtPointer() if (brickIndex !== null) { setTouchedBrickIndex(brickIndex) } } } const handleTouchMove = (event: THREE.ThreeEvent) => { if (isPlaying) return if (touchStartPosition) { // Calculate distance moved const dx = event.clientX - touchStartPosition.x const dy = event.clientY - touchStartPosition.y const distance = Math.sqrt(dx * dx + dy * dy) // If moved more than threshold, mark as moved if (distance > touchMoveThreshold) { setHasMoved(true) } } if (interactionMode === "erase" && !isMobile) { // For erase mode on desktop, update the highlighted brick if the pointer moves raycaster.setFromCamera(mouse, camera) const brickIndex = findBrickAtPointer() // Only update if we're not already touching a brick or if we've moved to a different brick if (touchedBrickIndex === null || brickIndex !== touchedBrickIndex) { setTouchedBrickIndex(brickIndex) } } } const handleTouchEnd = (event: THREE.ThreeEvent) => { if (isPlaying) return if (interactionMode === "build") { // If didn't move (or moved very little), consider it a tap to place a brick if (touchStartPosition && !hasMoved && isValid && showNewBrick) { onAddBrick({ color: selectedColor, position: currentBrickPosition, width, height: depth }) } } else if (interactionMode === "erase" && touchedBrickIndex !== null) { // For erase mode, delete the brick on touch end if we didn't move much if (!hasMoved && onDeleteBrick) { setIsDeleting(true) onDeleteBrick(touchedBrickIndex) } } // Reset touch tracking setTouchStartPosition(null) setHasMoved(false) setTouchedBrickIndex(null) } const handleBrickClick = (index: number) => { if (isPlaying || isDeleting) return if (interactionMode === "erase" && onDeleteBrick) { // Set deleting flag to prevent hover effects during deletion setIsDeleting(true) // Clear the hovered brick index immediately setHoveredBrickIndex(null) // Delete the brick onDeleteBrick(index) } } // Update the plane's raycast behavior when isPlaying changes useEffect(() => { if (planeRef.current) { if (isPlaying) { // Store the original raycast function const originalRaycast = planeRef.current.raycast ;(planeRef.current as any)._originalRaycast = originalRaycast // Set a dummy raycast function that does nothing planeRef.current.raycast = () => {} } else if ((planeRef.current as any)._originalRaycast && interactionMode === "build") { // Only restore for build mode and when not playing planeRef.current.raycast = (planeRef.current as any)._originalRaycast ;(planeRef.current as any)._originalRaycast = null } } }, [isPlaying, interactionMode]) // Add keyboard shortcut for toggling brick visibility useEffect(() => { const handleKeyDown = (event: KeyboardEvent) => { if (isPlaying) return // Disable keyboard controls when playing if (event.key === "h" || event.key === "H") { setShowNewBrick((prev) => !prev) } } window.addEventListener("keydown", handleKeyDown) return () => window.removeEventListener("keydown", handleKeyDown) }, [isPlaying]) return { currentBrickPosition, isValid, showNewBrick, hoveredBrickIndex: isMobile ? null : hoveredBrickIndex, // Never show hover effect on mobile touchedBrickIndex, handleClick, handleTouchStart, handleTouchMove, handleTouchEnd, handleBrickClick, planeRef, } } [V0_FILE]typescriptreact:file="constants.tsx" isQuickEdit="true" isMerged="true" export const GRID_SIZE = 20 export const BRICK_HEIGHT = 1.2 export const LAYER_GAP = 0.005 export const GROUND_HEIGHT = BRICK_HEIGHT / 4 export const STUD_HEIGHT = 0.2 export const STUD_RADIUS = 0.3 export const STUD_SEGMENTS = 16 export const TEXTURES = { roughness: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Plastic013A_1K-JPG_Roughness-uXe3bt2x4CgFTpjN9nyi0fPRvu69f2.jpg", normal: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Plastic013A_1K-JPG_NormalGL-K5hpwiN8hyBFaqLgpGOBe1n7JypC5n.jpg", color: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Plastic013A_1K-JPG_Color-vAhGH2sCmmtYLZ4Qp4UAdIIqzuTWkB.jpg", } export const MARBLE_TEXTURES = { roughness: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Marble019_1K-JPG_Roughness-E11kZGSuFRz7Tw1kAaDKzpCm9PexxD.jpg", normal: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Marble019_1K-JPG_NormalGL-yyE1gw0semnetBvj2CIz5UfqwTwoHr.jpg", color: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Marble019_1K-JPG_Color-yiNesdpa46Mn7IwRiCFo11NERCO2Yw.jpg", } [V0_FILE]typescriptreact:file="components/color-selector/maybe-tooltip.tsx" isMerged="true" "use client" import type React from "react" import { SimpleTooltip } from "../simple-tooltip" interface MaybeTooltipProps { text: string children: React.ReactNode isMobile: boolean } export const MaybeTooltip: React.FC = ({ text, children, isMobile }) => { if (isMobile) { return children } return ( {children} ) } [V0_FILE]typescriptreact:file="components/color-selector/history-controls.tsx" isMerged="true" "use client" import type React from "react" import { Undo2, Redo2 } from "lucide-react" import { MaybeTooltip } from "./maybe-tooltip" interface HistoryControlsProps { onUndo: () => void onRedo: () => void canUndo: boolean canRedo: boolean isMobile: boolean } export const HistoryControls: React.FC = ({ onUndo, onRedo, canUndo, canRedo, isMobile }) => { return (

) } [V0_FILE]typescriptreact:file="components/color-selector/file-controls.tsx" isMerged="true" "use client" import type React from "react" import { Save, FolderOpen } from "lucide-react" import { MaybeTooltip } from "./maybe-tooltip" interface FileControlsProps { onSave: () => void onLoad: () => void isMobile: boolean } export const FileControls: React.FC = ({ onSave, onLoad, isMobile }) => { return (

) } [V0_FILE]typescriptreact:file="components/color-selector/action-controls.tsx" isMerged="true" "use client" import type React from "react" import { Play, Trash2 } from "lucide-react" import { MaybeTooltip } from "./maybe-tooltip" interface ActionControlsProps { onPlayToggle: () => void isPlaying: boolean onClearSet: () => void isMobile: boolean hasBricks: boolean } export const ActionControls: React.FC = ({ onPlayToggle, isPlaying, onClearSet, isMobile, hasBricks, }) => { return (

) } [V0_FILE]typescriptreact:file="components/action-toolbar.tsx" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { Hammer, Move, Eraser } from "lucide-react" import { SimpleTooltip } from "./simple-tooltip" interface ActionToolbarProps { onModeChange: (mode: "build" | "move" | "erase") => void currentMode: "build" | "move" | "erase" } export const ActionToolbar: React.FC = ({ onModeChange, currentMode }) => { const [isMobile, setIsMobile] = useState(false) // Detect mobile device useEffect(() => { const checkMobile = () => { setIsMobile(window.innerWidth < 768) } checkMobile() window.addEventListener("resize", checkMobile) return () => window.removeEventListener("resize", checkMobile) }, []) // Conditionally render tooltip based on device const MaybeTooltip = ({ text, children }) => { if (isMobile) { return children } return ( {children} ) } return (

) } [V0_FILE]typescriptreact:file="components/color-selector/dimension-controls.tsx" isMerged="true" "use client" import type React from "react" import { ArrowLeftRight, ChevronDown } from "lucide-react" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { SimpleTooltip } from "../simple-tooltip" interface DimensionControlsProps { width: number height: number onWidthChange: (width: number) => void onHeightChange: (height: number) => void isMobile: boolean } export const DimensionControls: React.FC = ({ width, height, onWidthChange, onHeightChange, isMobile, }) => { // Create an array of options for the dropdowns (1-20) const dimensionOptions = Array.from({ length: 20 }, (_, i) => i + 1) // Function to swap width and height const handleSwapDimensions = () => { onWidthChange(height) onHeightChange(width) } if (isMobile) { return (

{width} {dimensionOptions.map((option) => ( onWidthChange(option)}> {option} ))} {height} {dimensionOptions.map((option) => ( onHeightChange(option)}> {option} ))}

) } return (

{width} {dimensionOptions.map((option) => ( onWidthChange(option)}> {option} ))} {height} {dimensionOptions.map((option) => ( onHeightChange(option)}> {option} ))}

) } [V0_FILE]typescriptreact:file="components/color-selector/color-picker.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Check } from "lucide-react" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { SimpleTooltip } from "../simple-tooltip" import { MaybeTooltip } from "./maybe-tooltip" import { lightenColor } from "@/lib/utils/lighten-color" import type { ColorTheme } from "./types" import { COLOR_THEMES } from "./types" interface ColorPickerProps { colors: string[] selectedColor: string onSelectColor: (color: string) => void currentTheme: ColorTheme onThemeChange: (theme: ColorTheme) => void isMobile: boolean } export const ColorPicker: React.FC = ({ colors, selectedColor, onSelectColor, currentTheme, onThemeChange, isMobile, }) => { const [isPopoverOpen, setIsPopoverOpen] = useState(false) // Color names for tooltips based on theme const colorNames = { default: ["Red", "Orange", "Yellow", "Green", "Light Blue", "Dark Blue", "Purple", "Black"], muted: [ "Muted Red", "Muted Orange", "Muted Yellow", "Muted Green", "Muted Cyan", "Muted Blue", "Muted Purple", "Dark Gray", ], monochrome: [ "White", "Light Gray 1", "Light Gray 2", "Mid Gray 1", "Mid Gray 2", "Dark Gray 1", "Dark Gray 2", "Near Black", ], } const ColorButton = ({ color, isSelected, onClick, index }) => ( )}

Muted

{COLOR_THEMES.muted.map((color, index) => (

Monochrome

{COLOR_THEMES.monochrome.map((color, index) => (

) } [V0_FILE]typescript:file="lib/utils/check-kv-integration.ts" isQuickEdit="true" isMerged="true" "use server" /** * Checks if the required KV environment variables are set * @returns boolean indicating if KV is properly configured */ export async function isKvConfigured(): Promise { try { const hasKvUrl = !!process.env.KV_REST_API_URL const hasKvToken = !!process.env.KV_REST_API_TOKEN // If both environment variables are present, try to make a simple KV request // to verify the connection works if (hasKvUrl && hasKvToken) { const { kv } = await import("@vercel/kv") // Try to ping the KV database await kv.ping() return true } return false } catch (error) { console.error("Error checking KV configuration:", error) return false } } [V0_FILE]typescriptreact:file="components/integration-check-dialog.tsx" isEdit="true" "use client" import type React from "react" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog" import Image from "next/image" import Link from "next/link" interface IntegrationCheckDialogProps { isOpen: boolean onClose: () => void actionType: "save" | "load" } export const IntegrationCheckDialog: React.FC = ({ isOpen, onClose, actionType }) => { return ( ) } 7c:["$","$L86",null,{"chatId":"utgpEteHhsV","children":["$","$L87",null,{"data":{"@\"active-block\",\"utgpEteHhsV\",":{"id":"b_0V3wmU2lnT5","messageId":"OnlIFY4VOvBx9vxwwuegUNz7RXTUNDEX","source":"$88","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"hello-world","type":"code-project","project":"hello-world"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"utgpEteHhsV\",":false,"":null},"children":"$L89"}]}]

{creation.name}

Default

Muted

Monochrome

Follow these steps:

About

Tags

Share

About

Tags

Share

More from ctate

More Templates Like This